<template>
	<view class="pug-pay">
		<u-navbar title="支付台" :autoBack="true"></u-navbar>
		<view class="pug-pay-body">
			<view class="item">
				<view class="box">
					<image :src="buyItem.img" mode="widthFix"></image>
					<view style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="title">
							{{buyItem.title}}
						</view>
						<view class="price" style="font-size: 18px;">￥{{buyItem.realprice}}元</view>
					</view>
				</view>
			</view>

			<view class="oitem">
				<view class="box" v-if="buyItem.isnew==1">
					<view class="title">
						<text class="zhu">新</text>
						<text class="txt">新课上架优惠￥20元</text>
					</view>
				</view>
				<view class="box">
					<view class="title">
						<text class="zhu">分</text>
						<text class="txt">分享朋友圈可以再减￥20元</text>
					</view>
					<u-icon color="#cecece" name="arrow-right"></u-icon>
				</view>
				<view class="box">
					<view class="title">
						<text class="zhu">助</text>
						<text class="txt">邀请好友助力</text>
					</view>
					<u-icon color="#cecece" name="arrow-right"></u-icon>
				</view>
				<view class="box">
					<view class="title">
						<text class="zhu">券</text>
						<text class="txt">兑换券/优惠券</text>
					</view>
					<u-icon color="#cecece" name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="pug-pay-popup">
				<view class="title">请选中支付方式</view>
				<view class="pug-pay-popup-body">
					<view class="zitem" @click="paymethod='weixin'">
						<view class="pay">
							<text class="iconfont icon-weixin"></text>
							<text>微信支付</text>
						</view>
						<text class="iconfont"
							:class="paymethod=='weixin'?'icon-checked_toast':'icon-baseline-radio_button_unchecked-px'"></text>
					</view>
					<view class="zitem" @click="paymethod='alipay'">
						<view class="pay">
							<text class="iconfont icon-zhifubao"></text>
							<text>支付宝支付</text>
						</view>
						<text class="iconfont"
							:class="paymethod=='alipay'?'icon-checked_toast':'icon-baseline-radio_button_unchecked-px'"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="book-mobile-other">
			<view class="buy-box">
				<view class="info1">支付合计：<text class="price">￥{{buyItem.realprice}}</text></view>
				<view class="info2">原价: <text class="price" style="text-decoration:line-through;font-size: 24rpx;">￥{{buyItem.price}}</text></view>
			</view>
			<view class="buy-box">
				<button class="button--buy" @click="tobuy">
					<view class="discount-price">提交订单</view>
				</button>
			</view>
		</view>

		<web-view :src="payUrl" v-if="payShow"></web-view>
	</view>

</template>

<script>
	import request from "@/utils/request.js";
	import debounce from "@/utils/debounce";
	export default {
		data() {
			return {
				show: false,
				paymethod: "weixin",
				buyItem: {
					title:"",
					price:"",
					realprice:"",
					img:"",
					id:""
				},
				payShow: false,
				payUrl: '',
				user:"",
				isLogin:""
			}
		},
		
		onLoad(options) {
			// 初始化加载
			this.loadDetail(options)
		},
		
		methods: {
			// 异步查询
			async loadDetail(options){
				const resData = await this.$request.post(this.$api.getCourseDetail+"/"+options.buyid)
				this.buyItem = resData.course
			},
			async tobuy(){
				let params = {opid:this.buyItem.id,telephone:"13571082448",couponId:""}
				const resData = await this.$request.post(this.$api.buyCourse,params)
				
			}
		}
	}
</script>

<style lang="scss" scope>
	.pug-pay {
		background-color: #F5F7FA;
		height: 100vh;
		padding:10px;
	}

	.pug-pay-popup {
		margin-top: 10px;
		background:#fff;
		padding:20px;
		.title {
			text-align: left;
			font-size: 24rpx;
		}

		.zitem {
			display: flex;
			justify-content: space-between;
			margin-top: 5px;
			padding: 20rpx 0;
			.pay {
				display: flex;
				align-items: center;
			}
			.iconfont {
				font-size: 48rpx;
				padding-right: 8px;
			}
		}
	}

	.book-mobile-other {
		display: flex;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 100vw;
		z-index: 499;
		padding: 12px 20px;
		background: #fff;
		border-top: 1px solid #F8F8F8;
	}

	.book-mobile-other .buy-box {
		flex-basis: 0%;
		flex-grow: 1;
		margin-left: 0.8rem;
		display: flex;
		flex-direction: column;

		.price {
			color: #ff7452;
			font-weight: 800;
		}

		.info2 {
			color: #999;
			padding-top: 8rpx;
		}
	}

	.book-mobile-other .button--buy {
		width: 100%;
		display: block;
		height: 40px;
		font-size: 14px;
		padding: 0 16px;
		background-color: #07c160;
		color: #fff;
		text-align: center;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.pug-pay-body {
		margin-top: 90px;
		.oitem {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx 40rpx;

			.box {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				
				.zhu {
					vertical-align: middle;
					display: inline-block;
					transform: translateY(-3px);
					height: 20px;
					line-height: 20px;
					font-size: 12px;
					border-radius: 4px;
					padding-left: 6px;
					padding-right: 6px;
					color: #fff;
					cursor: default;
					margin-right: 8px;
					background-color: #f64242;
				}
			}

			.footer {
				padding: 40rpx 0 0;
				color: #999;
				text-align: right;
			}
		}

		.item {
			background: #fff;
			border-radius: 20rpx;
			padding:20px;

			.box {
				display: flex;
				justify-content: space-between;
				padding: 0 0 10rpx;
				
				image{
					width: 180px;
					margin-right:15px;
				}

				.title {
					font-size: 32rpx;
					font-weight: 800;
				}

				.txt {
					color: #999;
					padding-right: 8rpx;
					font-size: 24rpx;
				}

				.price {
					color: #ff7452;
					font-weight: 800;
					font-size: 24rpx;
				}
			}

			.buyer {
				color: #666;

				.phone {
					padding-left: 20rpx;
				}
			}

			.footer {
				display: flex;
				padding-top: 25px;
				justify-content: space-between;
				font-size: 24rpx;

				.pmethod {}

				.ptype {
					color: #0cb1ff;
					display: flex;
					justify-content: space-between;

					text {
						padding-right: 8px;
					}
				}
			}
		}
	}

	.pug-pay-box {
		padding-top: 98rpx;
		padding-bottom: 25rpx;
		background: #fff;

		.title {
			font-weight: 800;
			font-size: 36rpx;
			text-align: center;
			color: #333;
		}
	}

</style>
